<template>
  <div class="user-body">
    <!--用户审批-->
    <div class="user-button">
      <el-button size="small" type="success" @click="add">添加</el-button>
      <el-button size="small" type="danger" @click="delBatch">批量删除</el-button>
      <el-input size="small" placeholder="请输入用户名" v-model="query.username" class="filter"/>
      <el-select size="small" v-model="query.status" placeholder="请选择用户状态" clearable class="filter">
        <el-option
            v-for="item in status"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button size="small" type="success" plain class="search-button" @click="getUserData">搜索</el-button>
    </div>
    <el-table
        :data="userData.records"
        stripe
        style="width: 100%"
        :border="true"
        @selection-change="handleSelectionChange"
        ref="multipleTable">
      <el-table-column type="selection"/>
      <el-table-column
          type="index"
          label="序号"
          width="81px">
        <template slot-scope="scope">
          {{(userData.current - 1) * userData.size + scope.$index + 1}}
        </template>
      </el-table-column>
      <el-table-column
          prop="username"
          label="用户名">
      </el-table-column>
      <el-table-column
          prop="phone"
          label="手机号">
      </el-table-column>
      <el-table-column
          prop="email"
          label="邮箱"
          :show-overflow-tooltip="true">
      </el-table-column>
      <el-table-column
          label="头像"
          width="130px">
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="imgUrl + scope.row.avatarPath"
              fit="fill"></el-image>
        </template>
      </el-table-column>
      <el-table-column
          prop="roleName"
          label="角色"
          width="115px">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="90px">
        <template slot-scope="scope">
          <span v-if="scope.row.status === -1">待审批</span>
          <span v-else-if="scope.row.status === 0">未启用</span>
          <span v-else-if="scope.row.status === 1">已启用</span>
          <span v-else>错误状态</span>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          fixed="right"
          width="145px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 0" size="mini" type="warning" @click="recover(scope.row.id)">恢复</el-button>
          <el-button v-if="scope.row.status === -1" size="mini" type="warning" @click="throughAudit(scope.row.id)">通过</el-button>
          <el-button v-if="scope.row.status === -1" size="mini" type="danger" @click="singleDel(scope.row.id)">驳回</el-button>
          <el-button v-if="scope.row.status === 1" size="mini" type="primary" @click="update(scope.row.id)">编辑</el-button>
          <el-button v-if="scope.row.status === 1" size="mini" type="danger" @click="singleLogicDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        background
        layout="prev, pager, next"
        :page-count="userData.pages"
        :current-page.sync="query.current"
        class="pagination"
        @current-change="getUserData">
    </el-pagination>
    <!--添加或修改的弹框-->
    <el-dialog
        width="500px"
        :title="editDialog.title"
        :visible.sync="editDialog.show">
      <component
          v-if="editDialog.show"
          :is="editDialog.component"
          :editDialogShow.sync="editDialog.show"
          :id="editDialog.id"
          :bankId="query.bankId"
          @getUserData="getUserData">
      </component>
    </el-dialog>
  </div>
</template>

<script>
import { get, put, del } from '@/plugins/axios'

export default {
  name: "user",
  created() {
    this.getUserData()
  },
  data() {
    const module = '/user'
    return {
      userData: {},
      query: {
        current: 1,
        size: 5
      },
      uri: {
        list: module + '/page',
        del: module + '/batchDelete',
        update: module + '/update',
        auditAccount: module + '/auditAccount'
      },
      editDialog: {
        title: '',
        show: false,
        id: null,
        component: () => import('@/views/main/user/edit')
      },
      multipleSelection: [],
      status: [
        {label: '待审批', value: -1},
        {label: '未启用', value: 0},
        {label: '已启用', value: 1}
      ]
    }
  },
  methods: {
    getUserData() {
      if (this.query.username === '') {
        delete this.query.username
      }
      if (this.query.status === '') {
        delete this.query.status
      }
      get(this.uri.list, this.query, response => {
        if (response.code === 200) {
          this.userData = response.data
        }
      })
    },
    add() {
      this.editDialog.title = '添加';
      this.editDialog.show = true;
      this.editDialog.id = null;
    },
    update(id) {
      this.editDialog.title = '编辑';
      this.editDialog.show = true;
      this.editDialog.id = id;
    },
    logicDel(idList) {
      put(this.uri.del, {idList: idList}, response => {
        if (response.code === 200) {
          this.getUserData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      })
    },
    del(idList) {
      del(this.uri.del, {idList: idList}, response => {
        if (response.code === 200) {
          this.getUserData()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }
      })
    },
    singleLogicDel(id) {
      this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.logicDel(id)
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error === 'cancel' ? '删除已取消' : error
        });
      })
    },
    singleDel(id) {
      this.$confirm('此操作将驳回该用户申请, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.del(id)
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error === 'cancel' ? '删除已取消' : error
        });
      })
    },
    delBatch() {
      const logicDelIdList = [];
      const delIdList = [];
      for (const id in this.multipleSelection) {
        if (this.multipleSelection[id].status === -1) {
          delIdList.push(this.multipleSelection[id].id)
        } else if (this.multipleSelection[id].status === 1) {
          logicDelIdList.push(this.multipleSelection[id].id)
        }
      }

      this.$confirm('此操作将删除或驳回用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (logicDelIdList.length !== 0) {
          this.logicDel(logicDelIdList)
        }
        if (delIdList.length !== 0) {
          this.del(delIdList)
        }
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error === 'cancel' ? '删除已取消' : error
        });
      })
    },
    recover(id) {
      this.$confirm('该用户状态将变为已启用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        put(this.uri.update, {id: id, status: 1}, response => {
          if (response.code === 200) {
            this.getUserData()
            this.$message({
              type: 'success',
              message: '恢复成功!'
            })
          }
        })
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error === 'cancel' ? '恢复已取消' : error
        });
      })
    },
    throughAudit(id) {
      this.$confirm('该用户状态将变为已启用, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        put(this.uri.auditAccount, {id: id, status: 1}, response => {
          if (response.code === 200) {
            this.getUserData()
            this.$message({
              type: 'success',
              message: '恢复成功!'
            })
          }
        })
      }).catch((error) => {
        this.$message({
          type: 'info',
          message: error === 'cancel' ? '恢复已取消' : error
        });
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  }
}
</script>

<style scoped lang="less">
.user-body {
  padding: 5px 10px 20px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background: white;
  .user-button {
    margin: 5px 0 5px 5px;
    .filter {
      width: auto;
      margin-left: 10px;
    }
    .search-button {
      margin-left: 10px;
    }
  }
  .pagination {
    margin-top: 8px;
  }
}
</style>